<template>
  <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="会员设置" prop="memberArea">
          <el-checkbox-group v-model="formData.memberArea">
            <el-checkbox label="0">
              <span> 共享会员设置 </span>
            </el-checkbox>
            <el-checkbox label="1">
              <span> 接收它店会员 </span>
            </el-checkbox>
            <el-checkbox label="2">
              <span> 开启付费会员 </span>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="商品售价" prop="goodsPrice">
          <el-radio-group v-model="formData.goodsPrice">
            <el-radio value="0">
              <span> 总部统一价格 </span>
            </el-radio>
            <el-radio value="1">
              <span> 门店自定义价格 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="商品上下架" prop="goodsShelf">
          <el-radio-group v-model="formData.goodsShelf">
            <el-radio value="0">
              <span> 总部统一状态 </span>
            </el-radio>
            <el-radio value="1">
              <span> 门店自定义状态 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="新增商品" prop="goodsAdd">
          <el-radio-group v-model="formData.goodsAdd">
            <el-radio value="0">
              <span> 总部统一状态 </span>
            </el-radio>
            <el-radio value="1">
              <span> 门店自定义状态 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="库存设置" prop="inventorySetting">
          <el-radio-group v-model="formData.inventorySetting">
            <el-radio value="0">
              <span> 独立库存 </span>
            </el-radio>
            <el-radio value="1">
              <span> 允许调货 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="收货人" prop="inventorySetting">
          <el-input v-model="formData.consignee" placeholder="收货人" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="收货地址" prop="profile">
          <el-input v-model="formData.profile" placeholder="收货地址" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="手机" prop="consigneePhone">
          <el-input v-model="formData.consigneePhone" placeholder="收货人" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="微商城设置" prop="inventorySetting">
          <el-radio-group v-model="formData.inventorySetting">
            <el-radio value="0">
              <span> 开启 </span>
            </el-radio>
            <el-radio value="1">
              <span> 关闭 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="店面租金" prop="rent">
          <el-input v-model="formData.rent" placeholder="店面租金" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="盈亏平衡点" prop="rent">
          <el-input v-model="formData.bep" placeholder="店面租金" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="支付设置" prop="paymentSetting">
          <el-radio-group v-model="formData.paymentSetting">
            <el-radio value="0">
              <span> 统一支付 </span>
            </el-radio>
            <el-radio value="1">
              <span> 独立支付 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="收银商户号" prop="cashierMerchantNumber">
          <el-input
            v-model="formData.cashierMerchantNumber"
            placeholder="填写通联支付商户号,可自动同步pos和扫码牌对账单"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="业绩设置" prop="paymentSetting">
          <el-radio-group v-model="formData.paymentSetting">
            <el-radio value="0">
              <span> 业绩去除离职员工 </span>
            </el-radio>
            <el-radio value="1">
              <span> 业绩计算离职员工 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="自动退出" prop="paymentSetting">
          <el-radio-group v-model="formData.paymentSetting">
            <el-radio value="0">
              <span> 关闭 </span>
            </el-radio>
            <el-radio value="1">
              <span> 开启 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="自动退出时间" prop="cashierMerchantNumber">
          <el-input v-model="formData.cashierMerchantNumber" placeholder="退出时间">
            <template #append>分钟</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes'
import type { TenantVO } from '@/api/system/tenant'
import { CommonStatusEnum } from '@/utils/constants'

import { copyValueToTarget } from '@/utils'

defineOptions({ name: 'SystemStoreForm' })

const props = defineProps({
  propFormData: {
    type: Object as PropType<TenantVO>,
    default: () => {}
  },
  activeName: propTypes.string.def('tenant')
})

const message = useMessage() // 消息弹窗

const formData = ref({
  id: undefined,
  name: '',
  phone: '',
  logo: '',
  detailAddress: '',
  introduction: '',
  areaId: 0,
  openingTime: undefined,
  closingTime: undefined,
  latitude: undefined,
  longitude: undefined,
  status: CommonStatusEnum.ENABLE
})
const formRules = reactive({
  // logo: [{ required: true, message: '门店 logo 不能为空', trigger: 'blur' }],
  // phone: [
  //   { required: true, message: '门店手机不能为空', trigger: 'blur' },
  //   { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  // ],
  // areaId: [{ required: true, message: '门店所在区域不能为空', trigger: 'blur' }],
  // detailAddress: [{ required: true, message: '门店详细地址不能为空', trigger: 'blur' }],
  // openingTime: [{ required: true, message: '营业开始时间不能为空', trigger: 'blur' }],
  // closingTime: [{ required: true, message: '营业结束时间不能为空', trigger: 'blur' }],
  // latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
  // longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
  // status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('【运营信息】不完善，请填写相关信息')
    emit('update:activeName', 'tenant')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })

/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
  },
  {
    immediate: true
  }
)

/** 初始化 **/
onMounted(async () => {
  // 加载地图
})
</script>
<style lang="scss">
.mapBox .el-dialog__body {
  height: 640px !important;
}
</style>
